<template>
  <div class="mod-config">
    <div style="display: flex; gap: 20px; margin-bottom: 20px;">
      <h1 style="margin: 0;">{{ teacher.teacherName }}</h1>
      <el-form style="flex: 1;">
        <div style="display: flex; flex-direction: column; gap: 20px;">
          <div style="display: flex; gap: 20px;justify-content: space-between;width: 100%">
            <div style="display:flex;gap: 20px">
              <el-form-item label="班级" class="my-el-form-item">
                <el-select style="width: 150px;" v-model="dataForm.classId" placeholder="请选择班级">
                  <el-option v-for="cla in classes" :value="cla.value" :label="cla.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学年" class="my-el-form-item">
                <el-select style="width: 150px;" v-model="dataForm.academicYear" placeholder="请选择学年">
                  <el-option v-for="year in schoolYear" :value="year.value" :label="year.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学期" class="my-el-form-item">
                <el-select style="width: 150px;" v-model="dataForm.semester" placeholder="请选择学期">
                  <el-option v-for="part in parts" :value="part.value" :label="part.label"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="评语类型" class="my-el-form-item">
                <el-select style="width: 150px;" v-model="dataForm.type" placeholder="请选择评语类型">
                  <el-option v-for="typ in types" :value="typ.value" :label="typ.label"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div style="display: flex;gap: 20px">

            <el-form-item label="评语字数" class="my-el-form-item">
              <el-select style="width: 120px;" v-model="dataForm.commentNum" placeholder="总字数个数">
                <el-option :value="200" label="200字"/>
                <el-option :value="350" label="350字"/>
                <el-option :value="500" label="500字"/>
              </el-select>
            </el-form-item>
            <el-form-item label="总关键词个数" class="my-el-form-item">
              <el-select style="width: 130px;" v-model="dataForm.keywordsNum" @change="changeKeyLength"
                         placeholder="总关键词个数">
                <el-option :value="15" label="15"/>
                <el-option :value="16" label="16"/>
                <el-option :value="17" label="17"/>
                <el-option :value="18" label="18"/>
              </el-select>
            </el-form-item>
            <el-form-item label="各个关键词个数" class="my-el-form-item">
            </el-form-item>
            <el-form-item label="德育" class="my-el-form-item">
              <el-select style="width: 80px;" v-model="dataForm.edu1" placeholder="请选择评语类型">
                <el-option v-for="edu1 in 18" :value="edu1-1" :label="edu1-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="智育" class="my-el-form-item">
              <el-select style="width: 80px;" v-model="dataForm.edu2" placeholder="请选择评语类型">
                <el-option v-for="edu2 in 18" :value="edu2-1" :label="edu2-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="体育" class="my-el-form-item">
              <el-select style="width: 80px;" v-model="dataForm.edu3" placeholder="请选择评语类型">
                <el-option v-for="edu3 in 18" :value="edu3-1" :label="edu3-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="美育" class="my-el-form-item">
              <el-select style="width: 80px;" v-model="dataForm.edu4" placeholder="请选择评语类型">
                <el-option v-for="edu4 in 18" :value="edu4-1" :label="edu4-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="劳育" class="my-el-form-item">
              <el-select style="width: 80px;" v-model="dataForm.edu5" placeholder="请选择评语类型">
                <el-option v-for="edu5 in 18" :value="edu5-1" :label="edu5-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="sureEdu">确定修改</el-button>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button @click="()=>{this.pageIndex=0;this.pageSize = 10;getDataList()}">查询</el-button>
            <a href="http://localhost:8080/renren-fast/eas/easstucomments/export">导出数据</a>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        width="120"
        label="学生名称"
      />
      <el-table-column
        prop="comment"
        header-align="center"
        align="center"
        label="评语内容"
      >
      </el-table-column>
      <el-table-column
        prop="keywords"
        header-align="center"
        align="center"
        label="关键词"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="250"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editCommentTextHandle(scope.row.id,scope.row.comment)"
          >评语编辑
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click="editKeys(scope.row.id,scope.row.studentId,scope.row.keywordsNum)"
          >关键词编辑
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click="reGenerate(scope.row)"
          >评语重新生成
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>


    <eas-edit-keys
      ref="editKeys"
      @refreshDataList="getDataList"
      @addKey="addKey"
    >
    </eas-edit-keys>

    <el-dialog title="修改" :close-on-click-modal="false" :visible.sync="editCommentTextFormVisible">
      <el-form>
        <el-form-item label="评语内容">
          <el-input autosize type="textarea" v-model="editCommentTextForm.comment"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateComment">确定</el-button>
          <el-button @click="editCommentTextFormVisible = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './easstucomments-add-or-update'
import EasEditKeys from './eas-edit-keys.vue'

export default {
  data () {
    return {
      dataForm: {
        key: '',
        classId: '',
        academicYear: '2023',
        semester: '第一学期',
        type: '',
        commentNum: '',
        keywordsNum: '',
        edu1: '',
        edu2: '',
        edu3: '',
        edu4: '',
        edu5: ''
      },
      editCommentTextFormVisible: false,
      editCommentTextForm: {
        id: '',
        comment: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      teacher: {},
      classes: [],
      parts: [
        {
          value: '第一学期',
          label: '第一学期'
        },
        {
          value: '第二学期',
          label: '第二学期'
        }
      ],
      lengths: [
        {
          value: 200,
          label: '200',
          counts: [
            {
              value: 15,
              label: '15'
            },
            {
              value: 16,
              label: '16'
            },
            {
              value: 17,
              label: '17'
            },
            {
              value: 18,
              label: '18'
            }
          ]
        },
        {
          value: 350,
          label: '350',
          counts: [
            {
              value: 15,
              label: '15'
            },
            {
              value: 16,
              label: '16'
            },
            {
              value: 17,
              label: '17'
            },
            {
              value: 18,
              label: '18'
            }
          ]
        },
        {
          value: 500,
          label: '500',
          counts: [
            {
              value: 15,
              label: '15'
            },
            {
              value: 16,
              label: '16'
            },
            {
              value: 17,
              label: '17'
            },
            {
              value: 18,
              label: '18'
            }
          ]
        }
      ],
      types: [
        {
          value: '期末评语',
          label: '期末评语'
        },
        {
          value: '学年评语',
          label: '学年评语'
        },
        {
          value: '毕业鉴定',
          label: '毕业鉴定'
        },
        {
          value: '专项评语',
          label: '专项评语'
        }
      ],
      schoolYear: [
        {
          value: '2021',
          label: '2021'
        },
        {
          value: '2022',
          label: '2022'
        },
        {
          value: '2023',
          label: '2023'
        },
        {
          value: '2024',
          label: '2024'
        },
        {
          value: '2025',
          label: '2025'
        },
        {
          value: '2026',
          label: '2026'
        }

      ],
      editKeysVisible: false
    }
  },
  components: {
    EasEditKeys,
    AddOrUpdate
  },
  activated () {
    this.getDataList()
    this.getOthers()
  },
  methods: {
    reGenerate (data) {
      this.$http({
        url: this.$http.adornUrl('/eas/easstucomments/getComment'),
        method: 'post',
        data: this.$http.adornData(data, false)
      }).then(({data}) => {
        if (data.code === 0) {
          this.$message({
            message: '更新成功',
            type: 'success',
            duration: 1500
          })
          this.getDataList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    addKey (data) {
    },
    getOthers () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/eas/easbasicteacher/search'),
        method: 'get',
        params: this.$http.adornParams({
          limit: 500,
          search: this.$store.state.user.id
        })
      }).then(
        ({
           data: {
             page: {list}
           }
         }) => {
          if (!list.length) return
          this.$set(this, 'teacher', list[0])
          this.$http({
            url: this.$http.adornUrl('/eas/easbasicteacherandclazz/search'),
            method: 'get',
            params: this.$http.adornParams({
              limit: 500,
              search: list[0].id
            })
          }).then(
            ({
               data: {
                 page: {list}
               }
             }) => {
              Promise.all(
                list.map(({clazzId}) =>
                  this.$http({
                    url: this.$http.adornUrl(
                      '/eas/easbasicclazz/info/' + clazzId
                    ),
                    method: 'get'
                  }).then(res => res.data.easBasicClazz)
                )
              ).then(all => {
                this.classes.splice(
                  0,
                  this.classes.length,
                  ...all.map(({id, className}) => ({
                    value: id,
                    label: className
                  }))
                )
                this.dataListLoading = false
                this.dataForm.classId = this.classes[0].value
              })
            }
          )
        }
      )
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/eas/easstucomments/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          academicYear: this.dataForm.academicYear,
          semester: this.dataForm.semester,
          classId: this.dataForm.classId,
          type: this.dataForm.type
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    editCommentTextHandle (id, text) {
      this.editCommentTextFormVisible = true
      this.editCommentTextForm.comment = text
      this.editCommentTextForm.id = id
    },
    updateComment () {
      this.$http({
        url: this.$http.adornUrl('/eas/easstucomments/update'),
        method: 'post',
        data: this.$http.adornData(this.editCommentTextForm, false)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.getDataList()
          this.editCommentTextFormVisible = false
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.id
        })
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl('/eas/easstucomments/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },

    changeKeyLength (value) {
      const keyMap = {
        15: {
          edu1: 3,
          edu2: 5,
          edu3: 3,
          edu4: 2,
          edu5: 2
        },
        16: {
          edu1: 3,
          edu2: 6,
          edu3: 3,
          edu4: 2,
          edu5: 2
        },
        17: {
          edu1: 4,
          edu2: 6,
          edu3: 3,
          edu4: 2,
          edu5: 2
        },
        18: {
          edu1: 4,
          edu2: 6,
          edu3: 4,
          edu4: 2,
          edu5: 2
        }
      }
      const keyLength = keyMap[value]
      for (const key in keyLength) {
        this.dataForm[key] = keyLength[key]
      }
    },
    sureEdu () {
      if (this.dataForm.edu1 === '' || this.dataForm.edu2 === '' || this.dataForm.edu3 === '' || this.dataForm.edu4 === '' || this.dataForm.edu5 === '') {
        this.$message.error('各个关键词个数不能为空')
        return
      }
      const total = this.dataForm.edu1 + this.dataForm.edu2 + this.dataForm.edu3 + this.dataForm.edu4 + this.dataForm.edu5
      if (total !== this.dataForm.keywordsNum) {
        this.$message.error('各个关键词个数总和不等于总关键词个数')
      } else {
        console.log(this.dataForm)
      }
    },
    editKeys (id, stuId, keyCount) {
      this.$refs.editKeys.init(id, stuId, keyCount)
      this.$refs.editKeys.visible = true
      this.editKeysVisible = true
    }
  }
}
</script>

<style scoped>
.my-el-form-item {
  display: flex;
  background: #f2f2f2;
  padding-left: 10px;
  border-radius: 5px;
  border: #999999 1px solid;
}

.my-el-form-item >>> label {
  color: black !important;
}
</style>
